<template>
  <div id="container" style="color: gray">
    <div id="viewDiv1" v-show="isShow"></div>
    <div id="viewDiv2" v-show="!isShow"></div>
    <div style="position: absolute; left: 10px; top: 10px; z-index: 1000">
      <!--构造两个按钮,一个用来切换视图,一个用来执行移动视点方法-->
      <el-button size="large" :circle="true" @click="changeView">{{
        isShow?'2D':'3D'
      }}</el-button>
      <el-button
        size="large"
        :circle="true"
        @click="gotoTarget"
        class="action-button esri-icon-applications"
      ></el-button>
    </div>

    <!--两个dialog组件,一个用来输入2D视图移动视点方法的参数,一个用来输入3D视图移动视点方法的参数-->
    <el-dialog
      v-model="if_dialog_1"
      :show-close="false"
      icon="Search"
      style="
        white-space: pre-line;
        width: 450px;
        margin-top: 100px;
        margin-left: 10px;
      "
    >
      <template #header>
        请输入2D视图状态下移动视点方法所需的各项参数
      </template>
      <div style="display: flex; flex-direction: column">
        <div>
          <span>经度</span><el-input v-model="longitude"></el-input> <span>纬度</span
          ><el-input v-model="latitude"></el-input> <span>缩放级别:</span
          ><el-input v-model="zoom"></el-input> <span>动画时间(ms):</span
          ><el-input v-model="duration_2D"></el-input>
        </div>
      </div>
      <template #footer>
        <el-button @click="close">取消</el-button
        ><el-button @click="OK">确定</el-button>
      </template>
    </el-dialog>
    <el-dialog
      v-model="if_dialog_2"
      show-close="false"
      icon="Search"
      style="
        white-space: pre-line;
        width: 450px;
        margin-top: 100px;
        margin-left: 10px;
      "
    >
      <template #header> 请输入3D视图状态下移动视点所需的各项参数 </template>
      <div style="display: flex; flex-direction: column">
        <div>
          <span>X坐标</span><el-input v-model="x"></el-input> <span>Y坐标</span
          ><el-input v-model="y"></el-input> <span>相机高度:</span
          ><el-input v-model="z"></el-input> <span>俯仰角角度:</span
          ><el-input v-model="tilt"></el-input> <span>方位角角度:</span
          ><el-input v-model="heading"></el-input> <span>动画时间(ms):</span
          ><el-input v-model="duration_3D"></el-input>
        </div>
      </div>
      <template #footer>
        <el-button @click="close">取消</el-button
        ><el-button @click="OK">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import Map from "@arcgis/core/Map.js";
import MapView from "@arcgis/core/views/MapView.js";
import SceneView from "@arcgis/core/views/SceneView.js";
import { onMounted, ref } from "vue";
var map, view1, view2, active, views;
const if_dialog_1 = ref(false);
const if_dialog_2 = ref(false);
const longitude = ref(120.4);
const 纬度 = ref(36.1);
const zoom = ref(15);
const duration_2D = ref(1200);
//👆以上是2D视图移动视点方法所需的参数
const x = ref(120.4);
const y = ref(36.1);
const z = ref(1200);
const tilt = ref(60);
const heading = ref(0);
const duration_3D = ref(2000);
//👆以上是3D视图移动视点方法所需的参数

onMounted(()=>{
  init() // 页面初始化
})

const close = () => {
  //点击取消按钮,隐藏dialog组件
  if_dialog_1.value = false;
  if_dialog_2.value = false;
};

//如果当前视图为2D视图,打开2D视图对应的dialog组件,否则打开3D视图对应的dialog组件
const gotoTarget = () => {
  isShow.value ? if_dialog_1.value = true : if_dialog_2.value = true;
};

//点击dialog组件的确定按钮,根据不同的视图,执行对应的goTo方法
const OK = () => {
  if (isShow.value) {  // 2D视图
    //关闭dialog组件
    if_dialog_1.value = false;
    view1.goTo(
      {
        //第一个参数的核心属性是center(视图中心点坐标)和zoom(缩放级别)
        center: [Number(longitudetu.value), Number(latitude.value)],
        zoom: Number(zoom.value),
      },
      {
        duration: Number(duration_2D.value),
      }
    );
  } else {
    if_dialog_2.value = false;
    view2.goTo(
      {
        //第一个参数是一个camera对象,核心属性是position(相机位置),tilt(相机俯仰角)和heading(相机方位角)
        position: {  // 经纬度和高度
          x: Number(x.value),
          y: Number(y.value),
          z: Number(z.value),
          spaticalReference: { wkid: 3857 },
        },
        tilt: Number(tilt.value),  // 相机俯仰角
        heading: Number(heading.value),
      },
      {
        duration: Number(duration_3D.value),  // 相机方位角
      }
    );
  }
};

let isShow = ref(true)  // true显示2D视图,false显示3D视图

//点击按钮时调整两种视图的z-index属性,同时调整按钮文本
function changeView() {
  isShow.value = !isShow.value
}

const init = () => {
  map = new Map({
    //创建地图对象
    basemap: "satellite",
  });
  view2 = new SceneView({
    //创建3D视图对象
    container: "viewDiv2",
    map: map,
  });
  view1 = new MapView({
    //创建2D视图对象
    container: "viewDiv1",
    map: map,
  });
  // 去掉一些小部件
  view2.ui.remove(["zoom", "attribution", "navigation-toggle", "compass"]);
  view1.ui.remove(["zoom", "attribution"]);
  views = [view1, view2];

  for (const view of views) {
    // 监听视图是否正在与用户交互，例如拖动和旋转或者动画
    // interacting：当前是否在跟用户交互是则返回true     animation：是否在执行动画效果
    view.watch(["interacting", "animation"], () => {
      active = view;
      syncEvent(active);
    });
    view.watch("viewpoint", () => syncEvent(view));
  }

  // 把激活的视图点动态传给未激活视图，实现实时联动
  // 如果当前存在激活视图，则执行下面语句
  const syncEvent = (source) => {
    if (!active || !active.viewpoint || active !== source) {
      return;
    }
    for (const view of views) {
      // 将激活视图的中心点，传递给不激活的,从而实现联动
      if (view !== active) {
        view.viewpoint = active.viewpoint;
      }
    }
  };
};

</script>

<style scoped>
#container {
  height: 100%;
  width: 100%;
  /* padding: 0;
  margin: 0; */
  background-color: white;
  position: relative;
  /*👆👆不设置背景会出问题*/
}
#viewDiv1,
#viewDiv2 {
  position: absolute;
  height: 90vh;
  width: 100%;
  top: 0px;
  left: 0px;
}
#tool_box {
  position: absolute;
  left: 10px;
  top: 10px;
  z-index: 10000;
}
</style>
